<template>
    <div>
        <div class="vs-table-box orderStatus">
            <div class="tit">
                <div class="img">
                    <el-image style="width: 80px; height: 80px; border-radius: 50%" :src="info.img" v-if="info.img"> </el-image>
                </div>
                <div class="user_info">
                    <span>{{ info.name }}</span>
                    <span>{{ info.gender == 1 ? '男' : '女' }}</span>
                    <span>{{ info.phone }}</span>
                </div>
                <!-- <div class="dd">
                    {{info.store.title}}
                </div> -->
                <div>
                    <el-tag type="info">{{ info.store.title }}</el-tag>
                </div>
                <div style="margin-left: 40px" v-if="!info.quit_date">
                    <el-button type="warning" size="small" @click="$router.push(`/addStaff?id=${info.id}`)">修改员工信息</el-button>
                </div>
                <div style="margin-left: 40px" v-if="!info.quit_date">
                    <el-button type="danger" size="small" @click="dialogVisible = true">注销</el-button>
                </div>
            </div>
            <div class="title">
                <el-descriptions border title="详细资料">
                    <el-descriptions-item label="工号">{{ info.number }}</el-descriptions-item>
                    <el-descriptions-item label="身份证号">{{ info.id_card }}</el-descriptions-item>
                    <el-descriptions-item label="户籍地址">{{ info.address }}</el-descriptions-item>
                    <el-descriptions-item label="生日">{{ info.birthday }}</el-descriptions-item>
                    <el-descriptions-item label="年龄">{{ getAge(info.birthday) }}岁</el-descriptions-item>
                    <el-descriptions-item label="岗位">{{ info.position && info.position.name }}</el-descriptions-item>
                    <el-descriptions-item label="底薪">{{ info.base_money }}</el-descriptions-item>
                    <el-descriptions-item label="工龄补贴">{{ info.subsidy_money }}</el-descriptions-item>
                    <el-descriptions-item label="入职时间">{{ info.into_date }}</el-descriptions-item>
                    <el-descriptions-item label="合同时间" :span="3">起始 {{ info.contract_start }} 截止 {{ info.contract_end }} 共{{ getDaysBetween }}</el-descriptions-item>
                    <el-descriptions-item label="状态">{{ info.quit_date ? '离职' : '在职' }}</el-descriptions-item>
                    <el-descriptions-item label="离职时间" v-if="info.quit_date">{{ info.quit_date }}</el-descriptions-item>
                    <el-descriptions-item label="离职原因" v-if="info.quit_date">{{ info.quit_remark }}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <el-dialog title="" :visible.sync="dialogVisible" width="400px" destroy-on-close @close="formClose">
            <div class="dialog_info">
                <div class="tit">账号是否注销?</div>
                <div class="desc">注：该账号注销后不可恢复，建议谨慎操作</div>
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="离职日期" prop="quit_date">
                        <el-date-picker v-model="form.quit_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="离职原因" style="margin-top: 20px">
                        <el-input type="textarea" v-model="form.quit_remark"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="formClose">取 消</el-button>
                <el-button type="primary" @click="formSure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                form: {
                    quit_date: '',
                    quit_remark: '',
                },
                info: {
                    store: {},
                    position: {},
                },
                rules: {
                    quit_date: [
                        {
                            required: true,
                            message: '请选择离职日期',
                            trigger: 'blur',
                        },
                    ],
                },
            };
        },
        computed: {
            getAge() {
                return function (birthday) {
                    return new Date(new Date().getTime() - new Date(birthday).getTime()).getFullYear() - 1970;
                };
            },
            getDaysBetween(dateString1, dateString2) {
                dateString1 = this.info.contract_start;
                dateString2 = this.info.contract_end;
                if (!dateString1 || !dateString2) {
                    return 0 + '天';
                }
                var startDate = Date.parse(dateString1);
                var endDate = Date.parse(dateString2);
                if (startDate > endDate) {
                    return 0 + '天';
                }
                if (startDate == endDate) {
                    return 1 + '天';
                }
                var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                return days + 1 + '天';
                // if (days <= 30) {
                //     return days + 1 + "天";
                // } else if (days <= 365) {
                //     return Math.ceil(days / 7) + "周";
                // } else {
                //     return Math.ceil(days / 30) + "月";
                // }
            },
        },
        created() {
            let { id, type } = this.$route.query;
            if (id) {
                this.getRoom(id);
            }
        },
        methods: {
            async formSure() {
                this.$refs['form'].validate(async (valid) => {
                    if (!valid) return;
                    this.form.id = this.info.id;
                    let obj = Object.assign({}, this.form);
                    let { code, data } = await this.$Http.delStaff(obj);
                    if (code) {
                        this.dialogVisible = false;
                        this.$message.success('注销成功！');
                        this.getRoom(obj.id);
                    }
                });
            },
            formClose() {
                this.dialogVisible = false;
                this.form.quit_date = '';
                this.form.quit_remark = '';
            },
            async getRoom(id) {
                this.loading = true;
                let { code, data } = await this.$Http.getStaff({
                    id,
                });
                this.loading = false;
                if (code) {
                    this.info = data;
                }
            },
        },
    };
</script>

<style>
    .disabled .el-upload--picture-card {
        display: none !important;
    }
</style>
<style lang="scss" scoped>
    ::v-deep {
        .el-form-item {
            margin: 0;
        }
    }

    .orderStatus {
        padding: 40px 40px;
        display: flex;
        flex-direction: column;

        .tit {
            display: flex;
            align-items: center;

            .img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: rgba($color: #000000, $alpha: 0.1);
            }

            .user_info {
                margin-left: 20px;

                > span {
                    margin: 0 10px;
                }
            }

            .dd {
                margin: 0 20px;
                padding: 5px 20px;
                background-color: rgba($color: #000000, $alpha: 0.1);
                border: 1px solid rgba($color: #000000, $alpha: 0.2);
                font-size: 14px;
                color: rgba($color: #000000, $alpha: 0.7);
            }
        }

        .title {
            margin: 60px 0 20px;
            font-size: 16px;
            font-weight: 700;
        }

        .user_info {
            margin-left: 100px;
        }
    }

    .dialog_info {
        display: flex;
        flex-direction: column;
        align-items: center;

        .tit {
            font-size: 16px;
            font-weight: 600;
        }

        .desc {
            margin: 20px 0;
            font-size: 12px;
            color: rgba($color: red, $alpha: 0.8);
        }
    }
</style>
